<template>
	<view class="logo">
		<view class="logo-hd">
			<image src="http://storage.dezhoucloud.com/img/logo.png" mode="widthFix"></image>
			<view class="logo-hd-h1"> 医圈子医院 </view>
			<view class="logo-hd-h3"> 生命至上,医者仁心 </view>
		</view>
		<view class="logo-center">
			<uni-forms ref="form" :modelValue="form" :rules="rules">
				<block v-if="userOrPhone">
					<uni-forms-item name="username">
						<uni-easyinput v-model="form.username" placeholder="请输入用户名" />
					</uni-forms-item>
					<uni-forms-item name="password">
						<uni-easyinput type="password" v-model="form.password" placeholder="请输入密码"></uni-easyinput>
					</uni-forms-item>
				</block>
				<block v-else>
					<uni-forms-item name="phone">
						<uni-easyinput v-model="form.phone" placeholder="请输入手机号" />
					</uni-forms-item>
					<uni-forms-item name="captcha">
						<uni-easyinput type="password" v-model="form.captcha" placeholder="请输入验证码"></uni-easyinput>
					</uni-forms-item>
				</block>
			</uni-forms>
			<view class="logo-center-nr">
				<view v-if="userOrPhone" class="zhuces" @click="userOrPhoneHandle">
					用手机验证码登录
				</view>
				<view v-else-if="!userOrPhone" class="zhuces" @click="userOrPhoneHandle">
					用账号密码登录
				</view>
				<view v-if="!userOrPhone" class="zhuces" @click="captcha">
					获取验证码
				</view>
				<view class="zhuces" @click="$pub.go(zhuce_list)"> 注册 </view>
			</view>
		</view>
		<view class="logo-db ">
			<view class="logo-db-dl" @click="getDelu()"> 登陆 </view>
		</view>

		<view class="flex-cen mt50 text-center">
			<radio-group @change="radioChange">
				<view class="">
					<radio value="1" /> 我已阅读并同意 <text>《隐私政策》</text>
				</view>
			</radio-group>
		</view>
	</view>
</template>

<script>
	import {
		checkOpenGPSServiceByAndroid
	} from '@/utils/device.js'
	import {
		setToken,
		setUserInfo
	} from "@/utils/auth.js";
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				/*  */
				mapData: {
					point: {
						x: 0,
						y: 0,
					},
					"userId": "",
					// "type": "2",
					"type": "1",

				},
				userOrPhone: false,
				reISexits: false,
				// test: '登录',
				zhuce_list: "/pages/logo/zhuce/zhuce",
				form: {
					username: "", //用户名
					password: "", //密码
					phone: "", //手机
					captcha: "", //验证码
				},
				//注册
				forms: {
					ubirthday: "", //
					uloginname: "", //名字
					unickname: "",
					username: "", //用户名
					upassword: "", //密码
					usex: "",
					uweixin: "",
				},
				index: 1,
				ruless: {
					uloginname: {
						rules: [{
							required: true,
							errorMessage: "请输入登录名",
						}, ],
						validateTrigger: "sunmit",
					},
					username: {
						rules: [{
							required: true,
							errorMessage: "请输入姓名",
						}, ],
						validateTrigger: "sunmit",
					},
					upassword: {
						rules: [{
							required: true,
							errorMessage: "请输入密码",
						}, ],
						validateTrigger: "sunmit",
					},
					unickname: {
						rules: [{
							required: true,
							errorMessage: "请输入昵称",
						}, ],
						validateTrigger: "sunmit",
					},
					ubirthday: {
						rules: [{
							required: true,
							errorMessage: "请输入出生日期",
						}, ],
						validateTrigger: "sunmit",
					},
					usex: {
						rules: [{
							required: true,
							errorMessage: "请输入性别",
						}, ],
						validateTrigger: "sunmit",
					},

				},
				rules: {
					phone: {
						rules: [{
							required: true,
							errorMessage: "请输入手机号",
						}, ],
						validateTrigger: "sunmit",
					},
					captcha: {
						rules: [{
							required: true,
							errorMessage: "请输入验证码",
						}, ],
						validateTrigger: "sunmit",
					},
					password: {
						rules: [{
							required: true,
							errorMessage: "请输入密码",
						}, ],
						validateTrigger: "sunmit",
					},
					username: {
						rules: [{
							required: true,
							errorMessage: "请输入姓名",
						}, ],
						validateTrigger: "sunmit",
					},
				},
				value: "",
			};
		},
		onLoad() {},
		onShow() {
			
			/* 记住面膜 */
			this.readPassWord()
		},
		methods: {
			...mapMutations("m_userInfo", ["setQrcode", "updateUserInfo"]),
			
			/* 记住密码 */
			readPassWord(){
				let userInfo =  uni.getStorageSync('userInfo')
				let passWord = uni.getStorageSync('password')
				console.log(userInfo,"userInfo")
				if(userInfo){
					this.form.username  = userInfo.username
					if(passWord){
					this.form.password  = passWord
						
					}
				}
			},
			/*  验证码 */
			async captcha(phone) {
				if (phone != null && phone != '') {
					let re = await this.$API.authApi.captcha(this.form.phone);
					console.log(re, "yzm");
					if (re == null) {
						uni.showToast({
							title: "发送成功",
						});
					}
				}else{
					
				}
			},
			/* 登录 */
			getDelu() {
				let that = this;
				this.$refs.form.validate().then((result) => {
					if (that.value == 1) {
						if (that.userOrPhone) {
							that.$API.authApi.loginByUser(that.form).then((res) => {
								setToken(res.token);
								
								
								/* 保存密码 */
								uni.setStorageSync('password',that.form.password)
								
								// //聊天ID
								// 用token拿用户信息
								that.getUser();
								//校验
								that.isExist();
								that.$ws.init();
							});
						} else {
							if (true) {
								that.$API.authApi.loginByPhone(that.form).then((res) => {
									//存凭证
									setToken(res.token);
									// 用token拿用户信息
									that.getUser();
									// map信息
									// that.getMap()
									//校验
									that.isExist();
									that.$ws.init();
								});
							}
						}
					} else {
						uni.showToast({
							title: "请勾选同意协议",
						});
					}
				});
			},
			/* 切换 */
			userOrPhoneHandle() {
				this.userOrPhone = !this.userOrPhone;
			},
			/* 协议 */
			radioChange(e) {
				console.log(e.detail.value);
				this.value = e.detail.value;
			},
			/* 校验 */
			async isExist() {
				let re = await this.$API.filesApi.isExist();
				this.reISexits = re;
				/* 填过来 首页 没填 档案  */
				if (this.reISexits == false) {
					//填健康档案
					uni.navigateTo({
						url: "/pages_my/dangan/dangan",
					});
				}
				if (this.reISexits) {
					console.log("a2");
					uni.switchTab({
						url: "/pages/home/home",
					});
				}
			},

			/* 获取用户信息 */
			async getUser() {
				let that = this;
				let re = await this.$API.userApi.getUserInfo();

				that.mapData.userId = re.user.userid

				this.updateUserInfo(re.user);
				uni.setStorageSync("ID",re.user.userid)
			},
		},
	};
</script>

<style lang="scss" scoped>
	

	
	
	
	
	
	
	
	::v-deep uni-radio-group {
		width: 80%;
	}

	.logo {
		padding: 322rpx 30rpx;

		.logo-hd {
			text-align: center;

			image {
				width: 100rpx;
				margin: auto;
			}

			.logo-hd-h1 {
				font-size: 40rpx;
				color: #000000;
				font-weight: 600;
				letter-spacing: 5rpx;
				line-height: 64rpx;
			}

			.logo-hd-h3 {
				font-size: 27rpx;
				letter-spacing: 5rpx;
				color: #666;
			}
		}

		::v-deep .uni-forms-item {
			margin-bottom: 44rpx;
		}

		.logo-center {
			margin-top: 120rpx;

			::v-deep .uni-easyinput__content-input {
				border-bottom: 1rpx solid #d8d8d8;
				font-size: 30rpx;
				height: 80rpx;
			}

			::v-deep .is-input-border {
				border: 0;
			}

			.logo-center-nr {
				letter-spacing: 5rpx;
				font-size: 23rpx;
				display: flex;
				justify-content: space-between;
				color: #555;

				text {
					color: #0091ff;
				}

				.zhuces {
					color: #0091ff;
				}

				::v-deep .uni-radio-input {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.logo-db {
			margin-top: 112rpx;

			.logo-db-dl {
				background-color: #0091ff;
				color: #fff;
				line-height: 90rpx;
				text-align: center;
				border-radius: 48rpx;
			}
		}
	}

	.zhuces {
		display: flex;

		button {
			width: 46% !important;
		}
	}

	.loginContent {
		padding: 50rpx;

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20upx;

			view {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.box {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 150rpx;
		}

		.box-tu image {
			width: 184rpx;
			height: 184rpx;
			border-radius: 50%;
			margin-bottom: 162rpx;
		}

		uni-button {
			font-size: $uni-font-size-lg;
			font-weight: 600;
			color: #fff;
		}

		uni-button[type="default"] {
			min-height: 90rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-color: red;
			margin-top: 20rpx;
		}

		button {
			width: 100%;
		}

		.haoma {
			color: #666;
			font-size: 35rpx;
			margin-top: 50rpx;
		}

		.haoma2 {
			min-height: 45px;
			height: 45px;
			line-height: 45px;
			background-color: #7976e9;
			text-align: center;
			color: #fff;
			margin-bottom: 20px;
		}

		.placeholder {
			color: #ccc;
		}
	}

	.password-login {
		padding: 30upx 0;

		.input-box {
			padding: 0 50upx;
			// border-bottom: 1upx solid #f0f0f0;
			margin-bottom: 50upx;

			input {
				// padding: 27upx 0;
				font-size: 40upx;
				color: #333;
				font-weight: bold;
				height: 100rpx !important;
			}
		}

		.zhucetiaoting {
			text-align: center;
			margin-bottom: 80upx;
			color: #7976e9;
			font-weight: 700;
		}

		.zhucea {
			margin-bottom: 20rpx;
		}
	}

	.zhuce {
		margin-top: 500rpx;
	}

	.uni-icons {
		margin-right: 10rpx;
	}

	.uni-input {
		height: 50 !important;
	}
</style>